<script setup>
import { reactive, ref, watch } from "vue";

const name = ref("jack");
const age = ref(20);
const person = reactive({
  name: "jack",
  age: 20,
  city: {
    address: "北京",
  },
});

const change = () => {
  // name.value = "zhangsan";
  // age.value++;
  person.name = "zhangsan";
  person.age++;
};

// 监听对象时，只会浅层监听，并且新旧值相同（指向同一个对象）
watch(
  () => [person.age, person.name, person.city], // 如果具体的监听的对象中的属性，需要使用函数包装
  // person,
  // [name, age], // 监听多个
  // name,      // 单个监听
  // () => name.value,
  (newVal, oldVal) => {
    console.log(newVal, oldVal);
  },
  {
    deep: true, // 如果监听的时整个对象，需要使用deep进行深度监听
  }
);
</script>

<template>
  <div>
    <div>姓名：{{ person.name }} <input type="text" v-model="person.name" /></div>
    <div>年龄: {{ person.age }}</div>
    <div>城市：{{ person.city.address }} <input type="text" v-model="person.city.address" /></div>
    <button @click="change">click</button>
  </div>
</template>

<style scoped></style>
